<template>
	<el-container>
		<el-aside :width="collapse?'64px':'200px'" class="left_menu" >
			<div class="organization_content" >	
				<el-image style="width: 20px; height: 20px" :src="logo" fit="cover" class="logo"/>
				<div class="organization_name" v-if="!collapse" >
					康复中心
				</div>
			</div>
			<Sidebar></Sidebar>
      </el-aside>
      <el-container>
		<el-header class="page_header" height="48px">
			<Header/>
		</el-header>
        <el-main>			
			<router-view/>
	</el-main>
      </el-container>
    </el-container>
</template>

<script setup>
	import Sidebar from "./Sidebar.vue";
	import Header from "./Header.vue";
	import logo from "@images/logo.png";
	import {storeToRefs} from "pinia"
	import {useMenuCollapseStore} from"@/store/menu";
	const {collapse}=storeToRefs(useMenuCollapseStore())
</script>

<style scoped>
.organization_content{
    background: #2b2f3a;
    color:#fff;
    padding: 0 20px;
	height: 48px;
	width: 100%;
    box-sizing: border-box;
	overflow: hidden;
	line-height: 48px;
}
.logo{
	vertical-align: middle;
}
.organization_name{
    margin-left: 12px;
    font-size: 14px;
	white-space: nowrap;
	transition: opacity 1.5s;
	display: inline;
	vertical-align: middle;
}
.left_menu{
	background: #304156;
	transition: 0.5s;
}
	.el-container{
		height: 100%;
	}
	.el-main{
		padding: 8px;
	}
	.page_header{
		padding: 0;
		
	}
</style>